<template>
  <img id='user_logo' src="../assets/log_phonePwd.png"><br>
  <span id="phone">{{ get_local }}</span>
  <van-cell-group inset id="login">
    <van-field label="密码" left-icon="lock" placeholder="请输入登录密码" v-model="password_com"></van-field>
  </van-cell-group>
  <div style="margin: 16px;" id="login_btn">
    <van-button round block type="primary" native-type="submit" @click="logins">
      登录
    </van-button>
  </div>
 
  <div style="display: flex; justify-content: space-between; margin-top: 10px;">
    <span id="forget_pwd" @click="forget_pwd">忘记登录密码</span>
    <span id="change_login" @click="show = true">切换登录方式</span>
  </div>

  <van-action-sheet v-model:show="show" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel"
    @select="onSelect" />

</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios';
let get_local = localStorage.getItem('username')
const router = useRouter()
const onCancel = () => showToast('取消');
const show = ref(false);
let password_com = ref()

const actions =
  [
    { 'name': '手势解锁' },
    { 'name': '指纹解锁' },
    { 'name': '使用其他账号登录' },

  ];

function onSelect(item) {
  if (item.name == '使用其他账号登录') {
    router.push('/login')
  }
  else if (item.name == '手势解锁') {
    router.push('/gesture')
  }
}


function forget_pwd() {
  router.push('/reset')
}

function logins() {
  axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/logins/',
    data: {
      password: password_com.value,
    }
  }).then((res) => {
    if (res.data.code == 200) {
      console.log(res.data)
      alert('登录成功')
      router.push('/home')
    } else {
      alert('登录失败')
    }
  }).catch((err) => {
    console.log(err)
  })
}

</script>

<style scoped>
#user_logo {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: 100px;
  margin-left: 130px;
}

#phone {
  font-size: 15px;
  text-align: center;
  margin-top: 50px;
  margin-left: 137px;
  color: gray;
  font-style: oblique;
}

#login {
  margin-top: 50px;
}

#login_btn {
  margin-top: 50px;
}

#forget_pwd {
  font-size: 12px;
  text-align: center;
  color: #1989fa;
  margin-left: 50px;
}

#change_login {
  font-size: 12px;
  text-align: center;
  color: #1989fa;
  margin-right: 50px;
}
</style>